<template>
  <div class="style of-h">
    <div class="style-bg"></div>
    <div ref="screen" class="screen">
      <img class="sticker"
        :src="item.img"
        :style="{
          width: item.w,
          'z-index': item.zIndex,
          '-webkit-transform': `translate3d(${item.translateObj.x}px,${item.translateObj.y}px,0) scale(${item.translateObj.scale}) rotate(${item.translateObj.rotate}deg)`
        }"
        v-drag="{stickerIndex: index}"
        v-for="(item, index) in insertList" :value="item" :key="index"  alt="">
      <img class="face" :src="styleBase64" alt="">
    </div>
    <!-- <div class="sticker-button icon button"></div> -->
    <div class="bottom box box-ver box-ac box-jc animated fadeInUp">
      <div class="content box of-x-s">
        <div class="list box">
          <div @click="insertItem(item)"  v-for="(item, index) in stickerList" :value="item" :key="index" :style="{'background-image': 'url('+item.img+')'}" class="item icon">
            <!-- <div class="name">{{item.name}}</div> -->
          </div>
        </div>
      </div>
      <div class="tools box box-ac w-p100">
        <img @click="$router.go(-1)" class="close" :src="require('../assets/images/close.png')" alt="">
        <div class="box-f1"></div>
        <img :src="require('../assets/images/sticker-title.png')" alt="">
        <div class="box-f1"></div>
        <img @click="next()" class="check" :src="require('../assets/images/check.png')" alt="">
      </div>
    </div>
    <cloud></cloud>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import cloud from '@/components/cloud'
import { stickerList } from '@/assets/js/constants'
import AlloyFinger from 'alloyfinger'
const getDinstance = function (point0, point1) {
  return Math.sqrt(Math.pow(point0.pageY - point1.pageY, 2) + Math.pow(point0.pageX - point1.pageX, 2))
}
export default {
  name: 'sticker',
  components: {
    cloud
  },
  computed: {
    ...mapState(['styleBase64', 'activityGuid', 'userInfo'])
  },
  data () {
    return {
      styleImg: '',
      insertList: [],
      sW: 0,
      sH: 0,
      stickerList
    }
  },
  mounted () {
    this.styleImg = this.cropperBase64
    this.initStickerList()
    let $screen = this.$refs.screen
    this.sW = $screen.clientWidth
    this.sH = $screen.clientHeight
  },
  methods: {
    initStickerList () {
      this.stickerList.map(item => {
        item.translateObj = { x: 0, y: 0, scale: 1, rotate: 0 }
        item.w = '60%'
        item.zIndex = 1
        return item
      })
    },
    next () {
      let screenObj = {
        stickerList: this.insertList,
        sW: this.sW,
        sH: this.sH
      }
      this.$store.commit('screenObj', screenObj)

      let list = this.insertList.map(item => {
        let { code, translateObj, w, zIndex } = item
        return { code, translateObj, w, zIndex }
      })

      let reqJson = {
        screenObj: {
          sW: this.sW,
          sH: this.sH,
          stickerList: list
        },
        face_base64: this.styleBase64
      }
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=ledscreen.user.data.base64.create`,
        method: 'post',
        data: {
          activity_guid: this.activityGuid,
          openid: this.userInfo.openid,
          json_data: JSON.stringify(reqJson)
        }
      }).then(res => {
        if (+res.status === 1) {
          this.$router.push({
            path: '/result'
          })
        }
      })
    },
    insertItem (item) {
      this.insertList.push(JSON.parse(JSON.stringify(item)))
    }
  },
  directives: {
    drag: {
      inserted: (el, binding, vnode) => {
        let _this = vnode.context
        let { stickerIndex, sW, sH } = binding.value
        let translateObj = _this.insertList[stickerIndex].translateObj
        let af = new AlloyFinger(el, {
          touchStart: e => {
            e.preventDefault()
            e.stopPropagation()
            el.style.transition = 'all 0s'
            _this.insertList.forEach(item => {
              item.zIndex = 1
            })
            _this.insertList[stickerIndex].zIndex = 2
          },
          touchMove: e => {
            e.preventDefault()
            e.stopPropagation()
          },
          touchEnd: e => {
            // console.log('touchEnd')
            // el.style.transition = 'all 0.33s'
            // let stickerW = el.clientWidth
            // let stickerH = el.clientHeight
            // /* 控制贴纸在屏幕内 */
            // if (translateObj.y > (_this.sH - stickerH * translateObj.scale)) {
            //   translateObj.y = _this.sH - stickerH * translateObj.scale
            // }
            // if (translateObj.y < (stickerH * translateObj.scale - stickerH) / 2) {
            //   translateObj.y = 0
            // }
            // if (translateObj.x > (_this.sW - stickerW * translateObj.scale)) {
            //   translateObj.x = _this.sW - stickerW * translateObj.scale
            // }
            // if (translateObj.x < (stickerW * translateObj.scale - stickerW) / 2) {
            //   translateObj.x = 0
            // }
            // 如果贴纸被移到了屏幕外，删除贴纸
            let stickerW = el.clientWidth
            let stickerH = el.clientHeight
            if (translateObj.y > _this.sH || translateObj.y < -stickerH * translateObj.scale) {
              _this.insertList.splice(stickerIndex, 1)
            }
            if (translateObj.x > _this.sW || translateObj.x < -stickerW * translateObj.scale) {
              _this.insertList.splice(stickerIndex, 1)
            }
          },
          longTap: e => {
            e.preventDefault()
            e.stopPropagation()
            _this.insertList.splice(stickerIndex, 1)
          },
          rotate: e => {
            translateObj.rotate += e.angle
          },
          pinch: e => {
            // console.log('pinch>>>', e.zoom)
            translateObj.scale = e.zoom
          },
          pressMove: e => {
            // console.log('pressMove>>>', e, e.deltaX, e.deltaY)
            translateObj.x += e.deltaX
            translateObj.y += e.deltaY
          }
        })
      }
    }
    // drag: {
    //   inserted: (el, binding, vnode) => {
    //     let _this = vnode.context
    //     console.log('binding>>', binding)
    //     let { stickerIndex, sW, sH } = binding.value
    //     let pointStart = {x: 0, y: 0}
    //     let pointMove = {x: 0, y: 0}
    //     let translateObj
    //     let distance1
    //     el.addEventListener('touchstart', e => {
    //       let fingerCount = e.touches.length
    //       e.preventDefault()
    //       e.stopPropagation()
    //       translateObj = _this.insertList[stickerIndex].translateObj
    //       console.log(translateObj)
    //       _this.insertList.forEach(item => {
    //         item.zIndex = 1
    //       })
    //       _this.insertList[stickerIndex].zIndex = 2
    //       el.style.transition = 'all 0s'
    //       pointStart.x = e.touches[0].clientX
    //       pointStart.y = e.touches[0].clientY
    //       pointMove.x = 0
    //       pointMove.y = 0
    //       if (fingerCount >= 2) {
    //         console.log('fingerCount > 2')
    //         // 获取两点距离、中点位置；两点距离old/new=放大倍数；中点位置，缩放中心；
    //         let point0 = e.touches[0]
    //         let point1 = e.touches[1]
    //         distance1 = getDinstance(point0, point1)
    //         // this.touchPos = this.getFocalPoint(point0, point1)
    //         // 设置缩放倍数，
    //       }
    //     }, false)
    //     el.addEventListener('touchmove', e => {
    //       let fingerCount = e.touches.length
    //       e.preventDefault()
    //       e.stopPropagation()
    //       if (fingerCount === 1) {
    //         pointMove.x = e.touches[0].clientX - pointStart.x
    //         pointMove.y = e.touches[0].clientY - pointStart.y
    //         el.style.WebkitTransform = `translate3d(${translateObj.x + pointMove.x}px,${translateObj.y + pointMove.y}px,0) scale(${translateObj.scale})`
    //       } else if (fingerCount > 1) {
    //         let point0 = e.touches[0]
    //         let point1 = e.touches[1]
    //         let distance = getDinstance(point0, point1)
    //         let zoom = distance / distance1
    //         let scale = zoom * _this.insertList[stickerIndex].translateObj.scale
    //         console.log('scale>>', scale)
    //         _this.insertList[stickerIndex].translateObj.scale = scale
    //         el.style.WebkitTransform = `translate3d(${translateObj.x}px,${translateObj.y}px,0) scale(${scale})`
    //         distance1 = distance
    //         // _this.insertList[stickerIndex].w = zoom * _this.insertList[stickerIndex].w
    //         // _this.$forceUpdate()
    //         // let maxX = this.sW * scale - this.cropBoxRect.width
    //         // let maxY = this.imageState.height * scale - this.cropBoxRect.height
    //         // let touchPos = this.getFocalPoint(point0, point1)
    //         // let newX = zoom * (this.imageState.left + touchPos.x) - touchPos.x
    //         // let newY = zoom * ((this.imageState.top - this.imgInitTop) + touchPos.y) - touchPos.y + this.imgInitTop
    //         // 限制缩放
    //         // 图片新位置:由中点位置确认;(新位置到中点)/(旧位置到中点)=(new scale)/(old scale)
    //         // newLeft - touchPos.x = (distance / this.distance) * (oldLetf - touchPos.x)
    //         // oldLeft = 0 - this.imageState.left
    //         // oldTop = imgInitTop - this.imageState.top
    //         // this.distance = distance
    //         // if (scale < this.minScale) {
    //         //   this.imageState.scale = this.minScale
    //         // } else {
    //         //   this.imageState.scale = scale
    //         //   this.imageState.left = newX < 0 ? 0 : (newX > maxX ? maxX : newX)
    //         //   this.imageState.top = newY < 0 ? 0 : (newY > maxY ? maxY : newY)
    //         // }
    //         // this.touchPos = touchPos
    //       }
    //     }, false)
    //     el.addEventListener('touchend', e => {
    //       el.style.transition = 'all 0.33s'
    //       translateObj.x = translateObj.x + pointMove.x
    //       translateObj.y = translateObj.y + pointMove.y
    //       // alert(translateObj.scale)
    //       let stickerW = el.clientWidth
    //       let stickerH = el.clientHeight
    //       console.log(translateObj, stickerW, stickerH)
    //       /* 控制小球在屏幕内 */
    //       if (translateObj.y > (_this.sH - stickerH)) {
    //         translateObj.y = _this.sH - stickerH
    //       }
    //       if (translateObj.y < 0) {
    //         translateObj.y = 0
    //       }
    //       if (translateObj.x > (_this.sW - stickerW)) {
    //         translateObj.x = _this.sW - stickerW
    //         // translateObj.x = 2 * _this.ballW - _this.winW
    //       }
    //       if (translateObj.x < 0) {
    //         translateObj.x = 0
    //       }
    //       el.style.WebkitTransform = `translate3d(${translateObj.x}px,${translateObj.y}px,0) scale(${translateObj.scale})`
    //     }, false)
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/color.scss';
@import '../assets/css/mixins.scss';
.screen{
  position:absolute;
  z-index:1;
  bottom:3.2rem;
  left:50%;
  transform: translateX(-50%);
  width:3.8rem;
  height:7.8923rem;
  border:.1rem solid #FFF;
  overflow: hidden;
  .face{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
  .sticker{
    position:absolute;
    z-index:1;
    // -webkit-user-select: none;
    user-select: none;
  }
}
.sticker-button{
  position:absolute;
  bottom:2.4rem;
  left:50%;
  transform: translateX(-50%);
  width:2.9rem;
  height:.68rem;
  @include bg-image('../assets/images/sticker-button');
}
.bottom{
  position:absolute;
  bottom:0;
  left:2%;
  width:96%;
  height:2.3rem;
  background-color:rgba(255,255,255,.6);
  border-top-left-radius: .2rem;
  border-top-right-radius: .2rem;
}
.content{
  margin-top:.1rem;
  width:92%;
  // border:1px solid red;
  .list{
    height:100%;
    // width:20rem;
    .item{
      position:relative;
      width:1.2rem;
      height:1.2rem;
      margin-right:.3rem;
      // border:1px solid red;
      // .name{
      //   position: absolute;
      //   bottom:0;
      //   width:100%;
      //   height:.3rem;
      //   line-height:.3rem;
      //   font-size:.24rem;
      //   text-align: center;
      //   color:#FFF;
      //   background-color:rgba(0,0,0,.5);
      // }
    }
  }
}
.tools{
  height:.88rem;
  .close{
    margin-left:.3rem;
  }
  .check{
    margin-right:.3rem;
  }
  img{
    height:.54rem;
  }
}
</style>
